<template>
	<view class="addressmanage">
		<view class="list" v-if="addressList.length">
			<view class="item" v-for="item in addressList" :key="item.id" @tap="handleItemClick(item)">
				<view class="left">
					<view class="top">
						<view class="name">
							{{ item.name }}
							<text class="isDefault" v-if="item.defaultStatus">默认</text>
						</view>
						<view class="phone">{{ item.phoneNumber }}</view>
					</view>

					<view class="address">{{ item.province }}{{ item.city }}{{ item.region }} {{ item.detailAddress }}</view>
				</view>
				<navigator @tap.stop class="right" :url="'editAddress/editAddress?id=' + item.id"><image src="../../../static/icons/edit.png" mode=""></image></navigator>
			</view>
		</view>
		<empty v-else></empty>
		<navigator class="addBtn" url="editAddress/editAddress">新增地址</navigator>
	</view>
</template>

<script>
import { findAllAddress } from '../../../api/mine/addressmanage/index.js';
import mixin from '../../../mixins/mixin.js';
export default {
	data() {
		return {
			addressList: [],
			from: '' // 由哪个页面跳转过来
		};
	},
	mixins: [mixin],
	methods: {
		// 获取地址列表
		async getAddressList() {
			const { success, data } = await findAllAddress();
			if (success) {
				this.addressList = data.items;
				if (this.addressList.length) {
					// 保存到本地, 编辑使用
					uni.setStorageSync('addressList', this.addressList);
				} else {
					// 删除本地地址数据
					uni.removeStorageSync('address');
				}
			} else {
				uni.showToast({
					title: '获取失败,请稍后在试'
				});
			}
		},
		// item 点击
		handleItemClick(item) {
			if (!this.from) {
				return;
			}
			// 保存选择的地址
			uni.setStorageSync('address', item);
			// 返回上一页
			uni.navigateBack({
				delta: 1
			});
		}
	},
	onShow() {
		if (this.checkLogin()) {
			this.getAddressList();
		}
	},
	onLoad(option) {
		this.from = option.from;
	}
};
</script>

<style lang="scss" scoped>
.addressmanage {
	overflow: hidden;
	.list {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 132rpx;
			margin: 0 20rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ccc;
			.left {
				flex: 1;
				.top {
					display: flex;
					.name {
						width: 200rpx;
						font-size: 28rpx;
						.isDefault {
							font-size: 22rpx;
							background-color: #354e44;
							color: #fff;
							padding: 0 18rpx;
							border-radius: 8rpx;
							margin-left: 20rpx;
						}
					}
					.phone {
						color: #999;
						font-size: 24rpx;
					}
				}
				.address {
					color: #333;
					font-size: 28rpx;
					margin-top: 30rpx;
				}
			}
			.right {
				width: 82rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-left: 1rpx solid #aaa;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.addBtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background-color: #354e44;
		color: #fff;
		box-shadow: 0px 2px 5px argb(0, 0, 0, 0.4);
		text-align: center;
		font-size: 15px;
	}
}
</style>
